<template>
  <div class="biaoqing">
    <div
      class="biaoqingitem"
      @click="biaoqing(index)"
      v-for="(index, i) in biaoqingarray"
      :key="index"
    >
      {{ index }}
    </div>
  </div>
</template>

<script>
import Bus from "@/assets/js/bus.js";

export default {
  name: "biaoqing",
  data() {
    return {
      biaoqingarray: [
        "😀",
        "😃",
        "😄",
        "😁",
        "😆",
        "😅",
        "🤣",
        "😂",
        "🙂",
        "🙃",
        "😉",
        "😊",
        "😇",
        "👋",
        "🤚",
        "🖐️",
        "✋",
        "🖖",
        "👌",
        "🤏",
        "✌️",
        "🤞",
        "🤟",
        "🤘",
        "🤙",
      ],
    };
  },
  methods: {
    biaoqing(content) {
      Bus.$emit("Biaoqing", content);
    },
  },
};
</script>

<style lang="scss" scoped>
.biaoqing {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.biaoqingitem {
  height: 80px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.biaoqingitem:hover {
  background-color: $bgcolor-gray;
}
</style>
